<template>
  <div class="disclaimer-page" :class="{ 'slide-in': isVisible }">
    <div class="header">
      <van-icon name="arrow-left" class="back-icon" @click="handleBack" />
      <span class="title">免责声明</span>
    </div>

    <div class="content">
      <div class="disclaimer-container">
        <h1 class="main-title">"帧选视频"项目免责声明</h1>

        <p class="intro-text">
          在您使用"帧选视频"（以下简称"本项目"）之前，请务必仔细、完整地阅读并理解本免责声明的全部内容。您对本项目的任何访问、浏览、下载、使用等行为，即视为您已充分知悉并完全接受本声明的所有条款。若您不同意本声明的任何内容，请立即停止使用本项目。
        </p>

        <section class="section">
          <h2 class="section-title">一、 项目性质与用户资格</h2>
          <p class="section-content">1.1 本项目是一个专注于视频内容聚合、筛选与展示的技术学习与交流平台，其核心宗旨是为开发者及技术爱好者提供一个研究、学习和非商业性交流的环境。</p>
          <p class="section-content">1.2 本项目明确为非营利性项目。项目内不存在任何形式的收费服务、商业广告或盈利性功能。所有运营行为均基于技术探索与开源共享的精神。</p>
          <p class="section-content">1.3
            任何使用本项目的用户，均被默认视为"技术学习者"或"交流者"。您承诺您的使用行为将严格限定于个人学习、技术研究和开发测试等非商业目的。任何超出此范围的使用均构成对本声明的根本性违反。</p>
        </section>

        <section class="section">
          <h2 class="section-title">二、 数据来源与权利声明</h2>
          <p class="section-content">2.1 来源告知：本项目展示的所有视频内容及相关信息（包括但不限于标题、描述、封面、作者等）均采集自"开眼App"（Eyepetizer）。</p>
          <p class="section-content">2.2
            非官方渠道声明：特此明确告知，本项目与"开眼App"官方不存在任何隶属、授权、合作或代理关系。本项目所采用的数据接口技术来源于对公开网络资源的分析与第三方技术社区的分享，并非官方提供或授权的正式接口（Official
            API）。</p>
          <p class="section-content">2.3
            权利归属：我们郑重承认，"开眼App"平台上的所有内容及其相关知识产权（包括著作权、商标权等）与合法权益，均归属于"开眼App"运营方、原始内容创作者及各自合法权利人。本项目不对原始数据主张任何权利，仅作为技术实现的载体。
          </p>
          <p class="section-content">2.4 使用边界：我们对源数据的使用严格限于为实现本项目学习交流目的所必需的技术处理，并承诺：</p>
          <ul class="section-list">
            <li>明确标注来源，不冒用官方名义。</li>
            <li>不恶意篡改、歪曲原始内容的核心信息。</li>
            <li>不从事任何有损于数据来源方及内容创作者合法权益的行为。</li>
          </ul>
        </section>

        <section class="section">
          <h2 class="section-title">三、 服务风险与责任限制</h2>
          <p class="section-content">3.1
            接口不稳定性：由于数据接口的非官方性质，本项目服务的连续性、稳定性和数据准确性无法得到保证。您理解并接受可能出现的服务中断、数据延迟、内容错误等问题，本项目运营方对此不承担责任。</p>
          <p class="section-content">3.2 服务变更与终止：我们保留随时修改、暂停或终止全部或部分服务的权利，无需事先通知。特别是当数据来源方采取技术或法律措施时，本项目可能无法继续运营。</p>
          <p class="section-content">3.3 技术兼容性：因用户设备、操作系统、网络环境等差异导致的兼容性问题，本项目运营方不承担任何责任。</p>
        </section>

        <section class="section">
          <h2 class="section-title">四、 知识产权保护与侵权处理</h2>
          <p class="section-content">4.1 尊重知识产权：本项目的运营建立在"合理使用"与"学习交流"的法律原则之上，我们充分尊重并支持知识产权保护。</p>
          <p class="section-content">4.2
            侵权投诉机制：如果您是相关权利方（如"开眼App"官方或内容创作者），认为本项目内容侵犯了您的合法权益，请通过文末提供的联系方式与我们联系。在收到包含必要权利证明的有效通知后，我们将迅速响应，并视情况采取移除相关内容、断开链接等措施，以配合保护您的权利。
          </p>
        </section>

        <section class="section">
          <h2 class="section-title">五、 用户行为规范与责任</h2>
          <p class="section-content">5.1 严禁商业使用：您不得将本项目任何部分（包括数据、内容、代码等）用于商业用途。商业用途包括但不限于：直接或间接牟利、广告推广、作为商业产品的一部分等。</p>
          <p class="section-content">5.2 禁止非法行为：您承诺不会利用本项目从事任何违反法律法规的行为，包括但不限于：</p>
          <ul class="section-list">
            <li>进行技术攻击（如破解、滥用爬虫）。</li>
            <li>传播恶意软件或破坏网络安全。</li>
            <li>利用本项目内容从事诈骗、诽谤、传播违法信息等活动。</li>
          </ul>
          <p class="section-content">5.3 用户责任自负：因您违反本声明或相关法律而引发的一切争议、索赔、损失及法律责任，均由您自行独立承担。若因此给本项目运营方或第三方造成损失，您应负责赔偿。</p>
        </section>

        <section class="section">
          <h2 class="section-title">六、 免责条款</h2>
          <p class="section-content">6.1 "现状"提供：本项目按"现状"和"可提供"的基础提供，不附带任何明示或默示的担保，包括但不限于对适用性、特定用途适用性及不侵权的担保。</p>
          <p class="section-content">6.2
            责任上限：在任何情况下，本项目运营方及其关联方均不对因您使用或无法使用本项目而导致的任何间接、附带、特殊或结果性损害（如数据丢失、利润损失、业务中断）承担责任，即使已被告知此类损害的可能性。</p>
          <p class="section-content">6.3 不可抗力：对于因不可抗力（如自然灾害、政府行为、战争、网络攻击、基础网络故障等）导致的服务中断或数据丢失，本项目运营方不承担责任。</p>
        </section>

        <section class="section">
          <h2 class="section-title">七、 其他</h2>
          <p class="section-content">7.1 声明修改：我们有权随时更新本免责声明。修改后的内容将于本项目页面公布时生效。您应定期查阅，继续使用即视为接受更新。</p>
          <p class="section-content">7.2 可分割性：若本声明任何条款被认定为无效或不可执行，不影响其余条款的持续有效性和约束力。</p>
          <p class="section-content">7.3
            法律适用与管辖：本声明的解释、效力及争议解决，均适用中华人民共和国法律。任何争议应首先通过友好协商解决；协商不成的，应提交至本项目运营方所在地有管辖权的人民法院诉讼解决。</p>
          <p class="section-content">7.4 联系我们：如您对本声明有任何疑问或需要进行权利申诉，请通过以下方式联系：[请在此处插入您的联系方式，例如电子邮件]。</p>
        </section>

        <div class="final-statement">
          <p class="final-text">
            最终声明："帧选视频"是一个立足于技术学习与交流的非营利项目。我们呼吁所有用户尊重原始版权，遵守法律法规，与我们共同维护一个纯粹、健康的技术学习环境。
          </p>
          <p class="effective-date">声明生效日期：2025年11月01日</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onActivated, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const isVisible = ref(false)

// 处理返回
const handleBack = () => {
  // 触发退出动画
  isVisible.value = false
  // 等待动画完成后再路由返回
  setTimeout(() => {
    router.back()
  }, 300)
}

// 触发进入动画
const triggerEnterAnimation = () => {
  // 确保初始状态是隐藏的（translateX(100%)）
  isVisible.value = false

  // 延迟一帧确保DOM已渲染，然后触发进入动画
  requestAnimationFrame(() => {
    requestAnimationFrame(() => {
      isVisible.value = true
    })
  })
}

// 组件挂载时触发动画
onMounted(() => {
  triggerEnterAnimation()
})

// 组件激活时触发动画（处理 keep-alive 情况）
onActivated(() => {
  triggerEnterAnimation()
})

onUnmounted(() => {
  isVisible.value = false
})
</script>

<style scoped lang="less">
.disclaimer-page {
  width: 100vw;
  height: 100vh;
  background-color: #f8f8f8;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;

  &.slide-in {
    transform: translateX(0);
  }

  .header {
    width: 100%;
    height: 6vh;
    padding: 0 4vw;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 3vw;
    border-bottom: 2px solid #2c3e50;
    position: sticky;
    top: 0;
    background-color: #2c3e50;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

    .back-icon {
      font-size: 18px;
      color: #fff;
      cursor: pointer;
      transition: opacity 0.2s;

      &:active {
        opacity: 0.7;
      }
    }

    .title {
      font-size: 17px;
      font-weight: 600;
      color: #fff;
      letter-spacing: 0.5px;
    }
  }

  .content {
    width: 100%;
    min-height: calc(100vh - 6vh);
    padding: 4vh 4vw;
    box-sizing: border-box;
    padding-bottom: 10vh;
    overflow-y: visible;

    .disclaimer-container {
      max-width: 100%;
      background-color: #fff;
      border-radius: 8px;
      padding: 5vh 5vw;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
      line-height: 1.8;
      overflow: visible;

      .main-title {
        font-size: 20px;
        font-weight: 700;
        color: #2c3e50;
        text-align: center;
        margin: 0 0 3vh 0;
        padding-bottom: 2vh;
        border-bottom: 3px solid #34495e;
        letter-spacing: 1px;
      }

      .intro-text {
        font-size: 14px;
        color: #34495e;
        text-align: justify;
        margin: 0 0 4vh 0;
        padding: 2vh 3vw;
        background-color: #f5f7fa;
        border-left: 4px solid #2c3e50;
        border-radius: 4px;
        line-height: 1.9;
        font-weight: 500;
      }

      .section {
        margin-bottom: 4vh;

        .section-title {
          font-size: 16px;
          font-weight: 700;
          color: #2c3e50;
          margin: 0 0 2vh 0;
          padding-bottom: 1vh;
          border-bottom: 2px solid #e0e0e0;
          letter-spacing: 0.5px;
        }

        .section-content {
          font-size: 13px;
          color: #34495e;
          text-align: justify;
          margin: 0 0 1.5vh 0;
          line-height: 1.9;
          text-indent: 0;
        }

        .section-list {
          margin: 1.5vh 0 2vh 4vw;
          padding: 0;
          list-style: none;

          li {
            font-size: 13px;
            color: #34495e;
            line-height: 1.9;
            margin-bottom: 1vh;
            padding-left: 2vw;
            position: relative;

            &::before {
              content: "•";
              position: absolute;
              left: 0;
              color: #2c3e50;
              font-weight: bold;
              font-size: 16px;
            }
          }
        }
      }

      .final-statement {
        margin-top: 5vh;
        padding: 3vh 3vw;
        background-color: #f5f7fa;
        border-radius: 6px;
        border: 2px solid #2c3e50;

        .final-text {
          font-size: 14px;
          color: #2c3e50;
          text-align: justify;
          margin: 0 0 2vh 0;
          line-height: 2;
          font-weight: 600;
        }

        .effective-date {
          font-size: 12px;
          color: #7f8c8d;
          text-align: right;
          margin: 0;
          font-style: italic;
        }
      }
    }
  }
}

// 深色模式下的样式调整（可选，保持严肃感）
@media (prefers-color-scheme: dark) {
  .disclaimer-page {
    background-color: #1a1a1a;

    .content {
      .disclaimer-container {
        background-color: #2d2d2d;
        color: #e0e0e0;

        .main-title {
          color: #fff;
          border-bottom-color: #555;
        }

        .intro-text {
          background-color: #333;
          color: #e0e0e0;
          border-left-color: #555;
        }

        .section {
          .section-title {
            color: #fff;
            border-bottom-color: #555;
          }

          .section-content {
            color: #d0d0d0;
          }

          .section-list {
            li {
              color: #d0d0d0;

              &::before {
                color: #fff;
              }
            }
          }
        }

        .final-statement {
          background-color: #333;
          border-color: #555;

          .final-text {
            color: #fff;
          }

          .effective-date {
            color: #999;
          }
        }
      }
    }
  }
}
</style>
